<template>
  <div class="home">
    <el-row>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-form :label-position="labelPosition" label-width="80px">
            <el-form-item label="用户账号:">
              <span class="user_text">{{GetUserinfo.nickname}}</span>
            </el-form-item>
            <el-form-item label="默认地址:">
              <span class="user_text">{{GetUserinfo.userinfo.default_address}}</span>
            </el-form-item>
            <el-form-item label="添加下级:" v-if="this.GetUserinfo.type != 5">
              <span class="user_text">{{mySuperior}}</span>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light">
          <el-form :label-position="labelPosition" label-width="80px">
            <el-form-item label="电话号码:">
              <div class="yinghang">
                <span class="user_text">{{GetUserinfo.phone}}</span>
              </div>
            </el-form-item>
            <el-form-item label="积分:">
              <div class="yinghang">
                <span class="user_text">{{GetUserinfo.userinfo.wallet}}</span>
              </div>
            </el-form-item>
            <el-form-item label="所属省份:" v-if="this.GetUserinfo.type != 5">
              <span class="user_text">{{GetUserinfo.province}}</span>
            </el-form-item>

          </el-form>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-form :label-position="labelPosition" label-width="80px">
            <el-form-item label="操作:">
              <div class="yinghang">
                <el-button type="danger" class="permissions" v-if="GetUserinfo.status == 1" @click="Frozen">冻结
                </el-button>
                <el-button type="primary" class="permissions" v-if="GetUserinfo.status == 2" @click="Frozen">解冻
                </el-button>
              </div>
            </el-form-item>
            <el-form-item label="修改上级:" v-if="QUANXIAN.Daili == true ">
              <el-button type="success" class="permissions" @click="subordinate = true">添加下级</el-button>
            </el-form-item>
            <el-form-item label="修改省份:" v-if="this.GetUserinfo.type != 5">
              <el-button type="warning" class="permissions" @click="Province = true">修改省份</el-button>
            </el-form-item>
            <el-form-item label="修改级别:">
              <el-button type="danger" class="permissions" @click="level = true">修改级别</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="添加下级" :visible.sync="subordinate">
      <el-form>
        <el-form-item label="请输入下级账号" :label-width="formLabelWidth">
          <el-input v-model="SuperiorNumber" type="number" auto-complete="off"></el-input>
          <span style="color: red">{{phone_length}}</span>
        </el-form-item>
        <el-form-item label="下级昵称：" :label-width="formLabelWidth">
          <span class="superior">{{user_nickname}}</span><span class="user_text_reid">{{userreid}}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="subordinate = false">取 消</el-button>
        <el-button type="primary" @click="modify">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="设置省份" :visible.sync="Province" >
      <el-form>
        <el-form-item label="设置省份" :label-width="formLabelWidth">
          <el-select v-model="ShengFen" placeholder="请选择">
            <el-option
              v-for="item in prosheng"
              :key="item.name"
              :label="item.name"
              :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="Province = false">取 消</el-button>
        <el-button type="primary" @click="updateProvince">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改级别" :visible.sync="level">
      <el-form>
        <el-form-item label="选择级别" :label-width="formLabelWidth">
          <el-select v-model="Gradevalue" placeholder="请选择">
            <el-option
              v-for="item in Grade"
              :key="item.key"
              :label="item.val"
              :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="折扣" :label-width="formLabelWidth">
          <el-input v-model="user_rate" placeholder="请输入折扣率 如10%-----请填写 0.1"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="level = false">取 消</el-button>
        <el-button type="primary" @click="levelclick">确 定</el-button>
      </div>
    </el-dialog>

    <el-tabs v-model="activeName" >


      <el-tab-pane label="下级分布图" name="second">
        <div class="tree well">
          <ul>
            <li>
              <span class="Own">
                <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-huiyuanjulebu"></use>
                   </svg>
                  {{GetUserinfo.nickname}}
              </span>
              <ul class="three_ul">
                <li v-for=" item in datauser">
                  <span @click="userarr(item)">
                         <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-huiyuanquanyi"></use>
                   </svg>
                    {{item.nickname}}&nbsp&nbsp&nbsp￥{{item.pay_money}}
                  </span>
                  <ul v-if="item.flag" class="elchild">
                    {{$data.flag}}
                    <li v-for=" user in datauser_two">
                      <span>
                            <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-huiyuan1"></use>
                      </svg>
                        {{user.nickname}}&nbsp&nbsp&nbsp￥{{user.pay_money}}
                      </span>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </el-tab-pane>
      <el-tab-pane label="积分返利记录" name="third">
        <!--<el-button type="primary" plain>返利成功</el-button> <el-button type="warning" plain>警告按钮</el-button>-->
        <div class="autd animated slideInRight">
          <el-table :data="datatitle" border style="width: 100%"  :row-class-name="tableRowClassName" v-loading="loading2" element-loading-text="拼命加载中">
            <el-table-column prop="remark" label="下级用户" width="500">
            </el-table-column>
            <el-table-column prop="money" label="返利金额" width="200">
            </el-table-column>
            <el-table-column prop="created_at" label="充值时间" width="250">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button @click="KanOrder(scope.row)" type="text" size="small">查看订单</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @current-change="fanlipage"
            :current-page="cur"
            :page-size="pagesize"
            :page-count="currentPage4"
            layout="total, prev, pager, next" :total="total">
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="订单信息" :visible.sync="order_info">
      <orderinfo :order="orderInfo"></orderinfo>
    </el-dialog>


  </div>
</template>
<script>
  import {
    mapGetters
  } from 'vuex'
  import prosheng from 'sc/Province'
  import  orderinfo from  "cs/public/orderinfo";//
  export default {
    components: {
      orderinfo
    },
    data(){
      return {
        prosheng: prosheng.proa,
        subordinate: false,
        Grade: [
          {
            'key': 2,
            'val': '业务员'
          },
          {
            'key': 3,
            'val': '一级代理'
          },
          {
            'key': 4,
            'val': '二级代理'
          },
          {
            'key': 5,
            'val': '用户'
          },
        ],  //等级
        Gradevalue: '',//等级value
        level: false,
        user_rate: '', //折扣
        radio: '1',
        pagesize: this.$store.state.attribute.page, //每页条数
        dataClassa: {  //购买数据
          total: 1,        //总条数
          currentPage4: 1, //总页数
          cur: 1           //当前页数
        },
//        dataClassb: { //返利数据
          total: 1,        //总条数
          currentPage4: 1, //总页数
          cur: 1 ,          //当前页数
//        },
        Province: false,   //省份状态
        loading2: false,
        datatitle: [],  //当页数据
        labelPosition: 'left',
        usercord: {
          "user_number": 18011118888,
          "address": "中共中央四川省绵阳市",
          "integral": 998,
        },
        dialogFormVisible: false,
        SuperiorNumber: "",//添加下级搜索框
        formLabelWidth: '120px',
        status: 1,
        activeName: 'second',
        datauser: [], //一级数据
        datauser_two: [],//二级数据
        display: false,
        phone_length: "",
        user_nickname: '',  //被安插用户的名称
        Add_User_Id: '',//被安插用户的id
        QUANXIAN: {
          Yewuyuan: false,
          Daili: false,
          Yonghu: false,
        },
        userreid: '',
        ShengFen: '',  //省份VAL
        mySuperior: '', //我的上级
        sun:0,
        order_info: false,// 订单状态
        orderInfo: [],// 订单信息
        order_loading2: false,
      }
    },
    methods: {
      /*********************  分红返利  *************************/
      KanOrder(row){  //查看订单
        this.orderInfo = [];
        this.order_loading2 = true;
        this.order_info = true;
        this.http.post({
          'api': 'adminSerachOrder',
          'data': {
            "data": {
              'orderid': row.order_id,//目标用户id
            }
          },
        }).then((res) => {
          this.order_loading2 = false;
          this.orderInfo.push(res.data.data)
        }, (err) => {
          this.$h.Ed(err, this);
        })
      },
      Rebate(e){  //获取我的分红返利
        this.http.post({
          'api': 'searchProfitlog',
          'data': {
            "data": {
              'phone': this.GetUserinfo.phone,//目标用户id
              'status': 1,
              'limit': this.pagesize
            }
          },
          'page':e,
        }).then((res) => {
          this.loading2 = false;
         this.sum = res.data.data.sum;
         delete res.data.data.sum;
          this.fenhongshuju(res.data)
        }, (err) => {
          this.$h.Ed(err, this);
        })
      },
      fanlipage(val){     //返利分页
        this.loading2 = true;
        this.Rebate(val)
      },
      fenhongshuju(data) {//分红数据处理

        this.total = data.total; //数据总的条数
        this.currentPage4 = data.last_page;
        this.datatitle = data.data;
      },
      tableRowClassName({row}){
//        console.log(typeof row);
//        if(typeof row == number){
//
//        }
      },
//      orderpage(val) {//商品购买分页
//
//      },


      Frozen(){      //冻结 解冻
        this.http.post({
          'api': 'freezeuser',
          'data': {
            "data": {
              'userid': this.GetUserinfo.id,//目标用户id
            }
          }
        }).then((res) => {
          this.$h.dataSuccess(res.data, this);
          this.GetUserinfo.status = res.data.data.status;
        }, (err) => {
          this.$h.Ed(err, this);
        })
      },
      serach_user(){  //搜索用户
        this.http.post({
          'api': 'searchuser',
          'data': {
            'data': {
              "value": this.SuperiorNumber,
              'search': 'phone',
              'limit': 1
            }
          },
        }).then((res) => {
          this.user_nickname = res.data.data[0].nickname;
          this.Add_User_Id = res.data.data[0].id;
          if (res.data.data[0].reid != 0) {
            this.userreid = "已分配";
          }
        }, (err) => {
          if (err) {
            this.$h.Ed(err, this);
          }
        })
      },
      updateProvince(){ //设置省份
        this.http.post({
          'api': 'setprovince',
          'data': {
            "data": {
              'province': this.ShengFen,//省份、
              'userids': [this.GetUserinfo.id]
            }
          }
        }).then((res) => {

          this.Province = false;
          if (this.GetUserinfo.type == 2) {
            this.GetUserinfo.province = res.data.data.new.province;
            if (res.data.data.old) {
              this.$notify({
                title: '设置成功',
                message: '替换了--' + res.data.data.old.nickname + '--请记得修改',
                type: 'success'
              });
            } else {
              this.$h.dataSuccess(res.data.data, this);
            }
          } else {
            this.$h.dataSuccess(res.data, this);
            this.GetUserinfo.province = res.data.data[0].province;
          }

        }, (err) => {
          this.$h.Ed(err, this);
        })
      },
//
      userchilds(){  //查看下级

        this.http.post({
          'api': 'showuserchildeorparent',
          'data': {
            "data": {
              'userid': this.GetUserinfo.id,//目标用户id
            }
          }
        }).then((res) => {
          res.data.data.forEach((i) => {
            i.flag = false;
          });
          this.datauser = res.data.data;
        }, (err) => {
          this.$h.Ed(err, this);
        })
      },
      modify()
      {      //添加下级
        this.http.post({
          'api': 'editUserChilde',
          'data': {
            "data": {
              'tagert_id': this.GetUserinfo.id,//目标用户id
              'user_id': this.Add_User_Id   //被安插的id
            }
          }
        }).then((res) => {
          //安插成功
          //1,  下线更新一次
          this.$h.dataSuccess(res.data, this);
          this.userchilds();//下线更新一次
        }, (err) => {
          this.$h.Ed(err, this);
        })
      },


      levelclick()
      {  //修改级别
//        Gradevalue
        if (this.Gradevalue == '') {
          this.$notify.error({
            title: '错误',
            message: '请选择级别'
          });
          return false
        }
        if (this.user_rate == '') {
          this.$notify.error({
            title: '错误',
            message: '请选择折扣'
          });
          return false
        }
        this.http.post({
          'api': 'settype',
          'data': {
            "data": {
              'userid': this.GetUserinfo.id,//目标用户id
              'level': this.Gradevalue,
              'rate': this.user_rate,
            }
          }
        }).then((res) => {
          this.$h.dataSuccess(res.data, this);
        }, (err) => {
          this.$h.Ed(err, this);
        })


      },
      userarr(row)  //二级数据
      {
        row.flag = true;
        this.http.post({
          'api': 'showuserchildeorparent',
          'data': {
            "data": {
              'userid': row.id,//目标用户id
            }
          }
        }).then((res) => {
          res.data.data.forEach((i) => {
            i.flag = false;
          });
          this.datauser_two = res.data.data;
        }, (err) => {
          this.$h.Ed(err, this);
        })
      },
      SeeSuperior(){
        this.http.post({
          'api': 'showuserchildeorparent',
          'data': {
            "data": {
              'userid': this.GetUserinfo.id,//目标用户id
              "parent": 'true',
            }
          }
        }).then((res) => {
          this.mySuperior = res.data.data[0].nickname
        }, (err) => {
          this.$h.Ed(err, this);
        })
      },
    },
    watch: {
      SuperiorNumber(r, v)
      {
        if (r.length * 1 == 11) {
          this.serach_user();
        }
      }
    },
    computed: {
      ...mapGetters([
          'GetUserinfo',
        ]),
    },
    mounted()
    {
      console.log(this.GetUserinfo);
      if(this.GetUserinfo.type != 5){
        this.Rebate();//获取分红返利
        this.SeeSuperior();

      }

      switch (this.GetUserinfo.type) {
        case 1:
          this.QUANXIAN.Daili = false;
          break;
        case 2:
          this.QUANXIAN.Daili = false;
          break;
        case 3:
          this.QUANXIAN.Daili = true;
          this.userchilds();
          break;
        case 4:
          this.QUANXIAN.Daili = false;
          break;
        case 5:
          this.QUANXIAN.Daili = false;
          this.loading2 = false;
          break;
      }
      //生命周期
    }
  }
</script>
<style scoped>
  .home {
    width: 100%;
    height: 100%;
  }

  .user_text_reid {
    margin-left: 50px;
    font-family: cursive;
    color: red;
    font-size: 1.5rem;
  }

  .superior {
    font-size: 1.6rem;
    font-weight: bolder;
    font-family: cursive;

  }

  /*
  树形控件
  */
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }

  .elchild {
    transition: 3s;
  }

  .Own {
    margin-left: 20%;
    text-align: center;
  }

  .three_ul {
    padding: 0;
    /*margin: 0px 0 10px 25px;*/
    width: 50%;
    margin: auto;
    cursor: pointer;
  }

  .tree {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #fbfbfb;
    border: 1px solid #999;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    transition: 3s;
  }

  .tree li {
    list-style-type: none;
    margin: 0;
    padding: 10px 5px 0 5px;
    position: relative;

    transition: 3s;
  }

  .tree li::before, .tree li::after {
    content: '';
    left: -20px;
    position: absolute;
    right: auto
  }

  .tree li::before {
    border-left: 3px solid #999;
    bottom: 50px;
    height: 100%;
    top: 0;
    width: 1px
  }

  .tree li::after {
    border-top: 3px solid #999;
    height: 20px;
    top: 25px;
    width: 25px
  }

  .tree li span {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #999;
    border-radius: 5px;
    display: inline-block;
    padding: 3px 8px;
    text-decoration: none;
    width: 14rem;
    height: 1rem;
    line-height: 1rem;
  }

  .tree li.parent_li > span {
    cursor: pointer
  }

  .tree > ul > li::before, .tree > ul > li::after {
    border: 0
  }

  .tree li:last-child::before {
    height: 30px
  }

  .tree li.parent_li > span:hover, .tree li.parent_li > span:hover + ul li span {
    background: #eee;
    border: 1px solid #94a0b4;
    color: #000
  }
</style>
